<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-07-26 09:45:11
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:54:25
-->
<template>
  <div>
    <el-dialog
      title="线索名称"
      :visible.sync="dialog.dialogClueShow"
      width="62%"
      @close="closeClue"
      custom-class="dialogClass"
      :close-on-click-modal="false"
      v-loading="loading"
    >
      <div class="basics">基础信息</div>
      <el-form
        :model="clueForm"
        ref="clueForm"
        :rules="clueRules"
        label-position="top"
        v-if="dialog.ejectClue"
      >
        <el-form-item label="线索名称" prop="name">
          <el-input v-model="clueForm.name" placeholder="请输入线索名称">
          </el-input>
        </el-form-item>
        <el-form-item label="线索来源">
          <el-select v-model="clueForm.source" placeholder="请选择线索来源">
            <el-option
              v-for="(item, index) in sourceData"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input
            v-model="clueForm.phone"
            placeholder="请输入手机号码"
            oninput="value=value.replace(/[^\d]/g,'')"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="客户级别">
          <el-select v-model="clueForm.level" placeholder="请选择客户级别">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户行业">
          <el-select v-model="clueForm.industry" placeholder="请选择客户行业">
            <el-option
              v-for="item in industryData"
              :key="item.value"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="clueForm.address" placeholder="请输入地址">
          </el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入备注"
            v-model="clueForm.remark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div class="mainCustom">
        <div
          v-for="(item, index) in formList"
          :key="index"
          :class="item.type !== 18 ? 'mainCustomFive' : 'mainCustomOne'"
        >
          <div v-show="item.isHidden">
            <main-content
              :formList="item"
              class="main-con"
              ref="mainContent"
            ></main-content>
          </div>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="dialog.dialogClueShow = false">取消</el-button>
        <el-button type="primary" @click="newClue" v-if="clueForm.id == ''">
          保存
        </el-button>
        <el-button type="primary" @click="putClue" v-else>保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { newClue, updateClue } from "@/api/CRM";
import Vue from "Vue";
import { getDicts } from "@/api/system/dict/data";
Vue.prototype.getDicts = getDicts;
import { getModuleByName, showCustomField } from "@/api/currency.js";
import mainContent from "@/components/mainContent/index.vue";
export default {
  components: {
    mainContent,
  },
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    clueForm: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      formList: [],
      loading: false,
      //线索来源
      sourceData: [],
      //客户行业
      industryData: [],
      options: [],
      chioose: 1,
      clueRules: {
        phone: [
          {
            min: 11,
            max: 12,
            message: "请输入正确的 手机/座机 号码",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入线索名称",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.getDicts("customer_source").then((res) => {
      this.sourceData = res.data;
    });
    this.getDicts("customer_level").then((res) => {
      this.options = res.data;
    });
    this.getDicts("customer_industry").then((res) => {
      this.industryData = res.data;
    });
    this.getModule();
  },
  methods: {
    // 获取模块Id
    getModule() {
      getModuleByName({
        name: "线索",
      }).then((res) => {
        showCustomField({
          module: res.data,
          id: this.clueForm.id || null,
        }).then((res) => {
          console.log(res);
          res.data.map((item) => {
            if (item.type == 3 && item.choiceList == null) {
              item.choiceList = [];
              console.log(item);
            }
          });
          this.formList = res.data;
          console.log(this.formList);
        });
      });
    },
    newClue() {
      console.log(JSON.stringify(this.formList));
      this.clueForm.customField = JSON.stringify(this.formList);
      console.log(this.clueForm);
      this.$refs.clueForm.validate((valid) => {
        if (!valid) {
          return this.$message.error("请输入必填项");
        } else {
          this.loading = true;
          newClue(this.clueForm).then((res) => {
            if (res.code !== 200) return this.loading = false;
              
            
            this.$message.success(res.msg);
            this.$parent.getList();
            this.dialog.dialogClueShow = false;
            this.dialog.ejectClue = false;
            this.loading = false;
            this.closeClue();
          });
        }
      });
    },
    putClue() {
      this.clueForm.customField = JSON.stringify(this.formList);
      this.$refs.clueForm.validate((valid) => {
        if (!valid) {
          return this.$message.error("请输入必填项");
        } else {
          this.loading = true;
          updateClue(this.clueForm).then((res) => {
            if (res.code !== 200) return  this.loading = false;
            this.$message.success(res.msg);
            if (this.clueForm.crmType !== 2) {
              this.$parent.getList();
            }
            this.dialog.dialogClueShow = false;
            this.dialog.ejectClue = false;
            this.loading = false;
            this.closeClue();
          });
        }
      });
    },
    closeClue() {
      this.dialog.ejectClue = false;
    },
  },
};
</script>

<style lang="less" scoped>
.basics {
  position: relative;
  font-size: 14px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
  /deep/ .el-form-item {
    width: 50%;
    .el-input__inner {
      width: 330px;
    }
    .el-textarea__inner {
      width: 330px;
    }
  }
}
.mainCustom {
  display: flex;
  flex-wrap: wrap;
  .mainCustomFive {
    width: 50%;
  }
  .mainCustomOne {
    width: 100%;
  }
}
/deep/.dialogClass {
  .el-dialog__body {
    height: 720px;
    overflow: auto;
  }
}
</style>